<template>
  <div class="trace-node" :class="{ 'trace-node--trace': data.trace }">
    <div class="head">
      <div class="pid">PID {{ pid }}</div>
      <div class="username" v-if="data.username">{{ data.username }}</div>
    </div>
    <div class="name">{{ data.comm }}</div>
    <!-- <div class="exe">{{ data.exe }}</div> -->
  </div>
</template>
<script setup>
const props = defineProps({
  pid: String,
  data: Object,
})

const show = ref(true)
</script>
<style lang="scss" scoped>
.trace-node {
  background-color: #eff6ff;
  border: 1px solid #3b82f6;
  padding: 10px 12px 8px 12px;
  border-radius: 6px;
  // width: 180px;
  // height: 90px;
}

.head {
  display: flex;
}

.pid {
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 11px;
  background-color: #18181b;
  font-weight: bold;
}

.username {
  line-height: 1;
  color: #000;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 11px;
  background-color: #909399;
  color: #fff;
  margin-left: 8px;
}

.trace-node--trace {
  background-color: #fef2f2;
  border: 1px solid #ef4444;
  .pid {
    background-color: #ef4444;
  }
}

.name {
  margin-top: 4px;
  color: #000;
  font-weight: bold;
}

.exe {
  margin-top: 4px;
  color: #999;
  font-size: 12px;
}
</style>
